<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器(部分层级)：选择所有类为a1的p标签*/
       /* .a1 p{
            background-color: blue;
        }

        !*子代选择器*!
        .c2>p{
            color: crimson;
        }

        !*毗邻选择器*!
        .a2+p{
            background-color: aquamarine;
        }*/

        /*兄弟选择器:同一级别的，离得很近的*/
        .a2~p{
            background-color: blueviolet;
        }

        /*多元素选择器：同时匹配所有指定的元素*/
      /*  .div,p{
            background-color: aquamarine;
        }

        .a1 .a2, .a1~p{
            color: blue;
            font-size: 15px;
            background-color: red;
        }*/
        #下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用
        /*.a1 .a2{*/
        /*color: blue;*/
        /*font-size: 15px;*/
        /*background-color: red;*/
        /*}*/
        /*.a1~p{*/
        /*color: blue;*/
        /*font-size: 15px;*/
        /*background-color: red;*/
        /*}*/
    </style>
</head>
<body>
<p>hi say hello........</p>
<div class="a1">
    <div class="a2">
        <p id="s1">过去永远是画面</p>
        <div class="c2">
            <p>那片海</p>
        </div>

    </div>
    <p>huhhdhshsdfdfgfdgd</p>
    <h1 class="a3">第一章</h1>
    <h2>第二章</h2>
</div>
<div class="a1">
    <em>lalalalla啦啦啦啦案例</em>
    <div class="a2">
        <p>hohou后</p>
        <b>海燕&reg;</b>
    </div>
</div>
<h5>你好</h5>
<p>好好好</p>
</body>
</html>